<template>
  <div>
    <button @click="setFilter('all')">全部</button>
    <button @click="setFilter('active')">未完成</button>
    <button @click="setFilter('completed')">已完成</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'TodoFilters',
  emits: ['update-filter'],
  setup(_, { emit }) {
    const setFilter = (filter: 'all' | 'active' | 'completed') => {
      emit('update-filter', filter);
    };

    return { setFilter };
  }
});
</script>

<style scoped>
div button {
  background-color: #2196F3;
  margin: 5px 5px 5px 0;
}

div button:hover {
  background-color: #1976D2;
}
</style>